<template>
    <div>
        <EditTimeModelHuaxi />
        <div class="com_box">
            <div class="time_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-popover placement="bottom-start" width="380" v-model="is_brand">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/account_icon.svg" alt="" class="select_icon">
                                <span class="select_text">{{brandCheck.full_name?brandCheck.full_name:'请选择品牌'}}</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model">
                            <span class="tm_title font_16 color_01">品牌</span>
                            <div class="yusuan_list">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeBrand(item,index)" :class="{'active':item.id==brandCheck.id}" v-for="(item,index) in brandList" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.full_name}}</div>
                                    <div class="yusuan_edit flexbox flexcenter">
                                        <span class="icon_btn" @click.stop="editTimeModelHuaxi(item,index)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-popover>

                    <el-popover placement="bottom-start" width="380" v-model="is_type" style="margin-left:10px">
                        <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                            <div class="flexbox flexcenter">
                                <img src="../../assets/img/model_icon.svg" alt="" class="select_icon">
                                <span class="select_text" v-if="modelCheck.marketing_goal">{{modelCheck.marketing_goal=='LIVE_PROM_GOODS'?'直播带货':'短视频带货'}}</span>
                                <span class="select_text" v-else>请选择</span>
                            </div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <div class="time_model">
                            <span class="tm_title font_16 color_01">类型</span>
                            <div class="yusuan_list">
                                <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeModel(item,index)" :class="{'active':item.marketing_goal==modelCheck.marketing_goal}" v-for="(item,index) in modelList" :key="index">
                                    <img src="../../assets/img/market_checked.svg" alt="" class="ys_check">
                                    <div class="font_14 color_01">{{item.marketing_goal=='LIVE_PROM_GOODS'?'直播带货':'短视频带货'}}</div>
                                </div>
                            </div>
                        </div>
                    </el-popover>

                    <div class="flexbox flexcenter">
                        <el-popover placement="bottom-start" width="225" trigger="hover" style="margin-left:10px">
                            <div slot="reference">
                                <i class="el-icon-question has_quetion"></i>
                            </div>
                            <ul class="hasSelectList">
                                <li v-for="(item,index) in modelCheck.advertiser" :key="index">{{item.name}}</li>
                            </ul>
                        </el-popover>
                        <span class="font_14 color_02">已选账户</span>
                    </div>
                </div>
                <el-date-picker v-model="day" @change="selectDaty" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
            <div class="pd_20">
                <div class="time_title">总计</div>
            </div>
            <div class="time_count">
                <el-row :gutter="20">
                    <el-col class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">日期</div>
                            <div class="tc_num">{{countData.day?countData.day:'无'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                直播全天GMV 
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        直播全天GMV = 直播间累积成交金额  + 绑定户下智能优惠券金额的总和
                                        直播间累积成交金额数据来源：巨量千川->直播分析->直播数据->整体数据->累积成交金额
                                        智能优惠券金额路径: 巨量千川->直播分析->直播数据->广告数据->成交智能优惠券金额
                                        12:18
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                            </div>
                            <div class="tc_num">{{countData.gmv_live?countData.gmv_live:'0.00'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                直播全天消耗
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        来自API
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.cost_live?countData.cost_live:'0.00'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                短视频全天GMV
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        来自API
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.gmv_video?countData.gmv_video:'0.00'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                短视频全天消耗
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        来自API
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.cost_video?countData.cost_video:'0.00'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                直接GMV
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        直接GMV = 绑定户下的广告消耗数据总和 + 智能优惠券金额总和
                                        消耗数据路径：巨量千川->直播分析->直播数据->广告数据->消耗
                                        智能优惠券金额路径：巨量千川->直播分析->直播数据->广告数据->成交智能优惠券金额
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.direct_gmv?countData.direct_gmv:'0.00'}}</div>
                        </div>
                    </el-col>
                     <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                直接ROI
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        直接ROI = 直接GMV / 绑定户下的广告消耗数据总和
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.direct_roi?countData.direct_roi:'0.00'}}</div>
                        </div>
                    </el-col>
                     <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                全天消耗
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        全天消耗 = 直播全天消耗 + 短视频全天消耗
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.cost?countData.cost:'0.00'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                全天GMV
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        全天GMV = 直播全天GMV + 短视频全天GMV
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.gmv?countData.gmv:'0.00'}}</div>
                        </div>
                    </el-col>
                    <el-col  class="w-20">
                        <div class="tc_item flexbox flexcolumn flexjust">
                            <div class="tc_text">
                                全天ROI
                                <el-tooltip class="item" effect="dark" content="" placement="top">
                                    <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                                        全天ROI = 全天GMV / 全天消耗
                                    </div>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="8.0001" cy="8.0001" r="6.4" fill="#CFD4DD" />
                                        <path d="M5.92 7.08352V7.16352H6H6.99563H7.07563V7.08352C7.07563 6.72243 7.14429 6.45204 7.27846 6.26933L7.27851 6.26937L7.28031 6.2667C7.42646 6.04989 7.66706 5.94154 8.03493 5.94154C8.31743 5.94154 8.52971 6.01642 8.67611 6.16331C8.81667 6.31309 8.89817 6.52067 8.89817 6.79341C8.89817 6.99248 8.82745 7.18578 8.68085 7.36642L8.58011 7.48472C8.29712 7.73905 8.06929 7.95955 7.89737 8.14703C7.72622 8.33366 7.60626 8.49204 7.54407 8.62154C7.41437 8.87387 7.36105 9.1775 7.36105 9.51868V9.64176V9.72176H7.44105H8.44542H8.52541V9.64176V9.51868C8.52541 9.31966 8.56639 9.14727 8.64807 8.98284C8.72181 8.83439 8.82849 8.69371 8.97718 8.56898L8.97719 8.569L8.97864 8.56773C9.39678 8.19945 9.65405 7.95872 9.73649 7.86651L9.73673 7.86672L9.74101 7.86099C9.96259 7.5636 10.08 7.18561 10.08 6.73187C10.08 6.1767 9.89829 5.73149 9.52928 5.40627C9.16162 5.07341 8.67785 4.92 8.09607 4.92C7.43386 4.92 6.90555 5.10965 6.51193 5.49648C6.10826 5.88453 5.92 6.41749 5.92 7.08352ZM8.46723 10.5306L8.46727 10.5306L8.46526 10.5287C8.31798 10.3903 8.13182 10.3224 7.9214 10.3224C7.70991 10.3224 7.53282 10.391 7.38627 10.5287C7.2369 10.669 7.16891 10.8495 7.16891 11.0617C7.16891 11.2739 7.2369 11.4544 7.38627 11.5947C7.53082 11.7305 7.7072 11.8098 7.9214 11.8098C8.13289 11.8098 8.30997 11.7412 8.45652 11.6035C8.60478 11.4643 8.68262 11.2756 8.68262 11.0617C8.68262 10.847 8.60428 10.6686 8.46723 10.5306Z" fill="white" stroke="white" stroke-width="0.16" />
                                    </svg>
                                </el-tooltip>
                                </div>
                            <div class="tc_num">{{countData.roi?countData.roi:'0.00'}}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="com_box pd_20" style="margin-top:20px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="time_title">时段数据</div>
            <div class="flexbox flexcenter flexbetween time_rank">
                <div class="flexbox flexcenter">
                    <span class="font_14 color_01" style="margin-right:10px">时间粒度：</span>
                    <el-radio-group v-model="queryInfo.during" size="small" @change="changeTime">
                        <el-radio-button label="5">5分钟</el-radio-button>
                        <el-radio-button label="10">10分钟</el-radio-button>
                        <el-radio-button label="20">20分钟</el-radio-button>
                        <el-radio-button label="30">30分钟</el-radio-button>
                        <el-radio-button label="60">60分钟</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="flexbox flexcenter rank_count" v-if="multiple !=0 && Number(queryInfo.during)>10">
                    <el-tooltip class="item" effect="dark" content="" placement="top">
                        <div slot="content" class="tip_text">
                            ROI线性预测工具 （解决直播项目消耗节奏把控问题）根据时段消耗-ROI,以及当前总消耗、总GMV、总ROI预测(计算)<br />
                            到晚上12点,以保持当前时段消耗速率-ROI,最终的整体消耗、GMV、ROI数据为多少<br />
                            举例:中午12点,当前总消耗为10万,整体ROI为1.7,GMV为17万<br />
                            当前30分钟时段消耗为1万,时段ROI为1.8,GMV为1.8万<br />
                            预测结果：<br />
                            预测剩余消耗:1万*12小时/30分钟=24万,<br />
                            预测剩余GMV:1.8万*12小时/30分钟=43.2万；<br />
                            整体ROI=(43.2万+17万)/(10万+24万)=1.77;
                            </div>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right:10px">
                            <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                            <path d="M7.39994 8.8544V8.9544H7.49994H8.74448H8.84448V8.8544C8.84448 8.40304 8.9303 8.06505 9.09801 7.83666L9.09808 7.83671L9.10032 7.83337C9.28302 7.56236 9.58377 7.42692 10.0436 7.42692C10.3967 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1226 8.15083 11.1226 8.49176C11.1226 8.7406 11.0343 8.98223 10.851 9.20803L10.7251 9.3559C10.3713 9.67381 10.0866 9.94944 9.87165 10.1838C9.65771 10.4171 9.50776 10.6151 9.43002 10.7769C9.2679 11.0923 9.20125 11.4719 9.20125 11.8984V12.0522V12.1522H9.30125H10.5567H10.6567V12.0522V11.8984C10.6567 11.6496 10.7079 11.4341 10.81 11.2286C10.9022 11.043 11.0355 10.8671 11.2214 10.7112L11.2214 10.7113L11.2232 10.7097C11.7459 10.2493 12.0675 9.9484 12.1706 9.83314L12.1709 9.8334L12.1762 9.82623C12.4532 9.4545 12.5999 8.98201 12.5999 8.41484C12.5999 7.72088 12.3728 7.16437 11.9115 6.75784C11.452 6.34177 10.8473 6.15 10.12 6.15C9.29227 6.15 8.63188 6.38707 8.13985 6.8706C7.63526 7.35566 7.39994 8.02186 7.39994 8.8544ZM10.584 13.1633L10.584 13.1632L10.5815 13.1609C10.3974 12.9879 10.1647 12.903 9.90169 12.903C9.63732 12.903 9.41597 12.9888 9.23278 13.1609C9.04607 13.3363 8.96107 13.5619 8.96107 13.8271C8.96107 14.0924 9.04607 14.318 9.23278 14.4934C9.41346 14.6632 9.63394 14.7623 9.90169 14.7623C10.166 14.7623 10.3874 14.6765 10.5706 14.5044C10.7559 14.3303 10.8532 14.0945 10.8532 13.8271C10.8532 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </el-tooltip>
                    预测剩余消耗：
                    <span class="rank_text">{{rankCout.cost | keepTwoNumT}}</span>
                    <span class="rank_line"></span>
                    预测剩余GMV：
                    <span class="rank_text">{{rankCout.gmv | keepTwoNumT}}</span>
                    <span class="rank_line"></span>
                    整体ROI：
                    <span class="rank_text">{{rankCout.roi | keepTwoNumT}}</span>
                </div>
            </div>
            <el-table :data="tableData" class="com_table" max-height="700">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据，请选择模板</div>
                </div>
                <el-table-column prop="day" label="日期" min-width="120">
                </el-table-column>
                <el-table-column prop="segmentation_during" label="时段" min-width="120">
                </el-table-column>
                <el-table-column prop="segmentation_cost_video" label="短视频时段消耗" min-width="150">
                </el-table-column>
                <el-table-column prop="segmentation_gmv_video" label="短视频时段GMV" min-width="150">
                </el-table-column>
                <el-table-column prop="segmentation_cost_live" label="直播时段消耗" min-width="150">
                </el-table-column>
                <el-table-column prop="segmentation_gmv_live" label="直播时段GMV" min-width="150">
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="时段总消耗" min-width="120">
                </el-table-column>
                <el-table-column prop="segmentation_gmv" label="时段总GMV" min-width="120">
                </el-table-column>
                <el-table-column prop="roi" label="时段总ROI" min-width="150">
                </el-table-column>
            </el-table>
            <div class="page_box flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import EditTimeModelHuaxi from "./EditTimeModelHuaxi";
export default {
    name: "",
    data() {
        return {
            multiple:0,
            is_brand: false,
            is_type: false,
            advertiser_id: "",
            loading: false,
            modelCheck: {},
            modelList: [],
            brandCheck: {},
            brandList: [],
            day: "",
            countData: {},
            rankCout:{
                cost:0,
                gmv:0,
                roi:0,
            },
            queryInfo: {
                during: "5",
                page: 1,
                limit: 20,
                day: "",
                brand_id: "",
            },
            countInfo: {
                day: "",
                brand_id: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getBrandList();
        let sessionForm = JSON.parse(
            window.sessionStorage.getItem("huaxiQuery")
        );
        if (sessionForm && sessionForm.brandCheck.id) {
            this.brandCheck = sessionForm.brandCheck;
            this.day = sessionForm.day;
            this.queryInfo.day = sessionForm.day;
            this.queryInfo.brand_id = sessionForm.brandCheck.id;
            this.queryInfo.during = sessionForm.during;
            this.countInfo.brand_id = sessionForm.brandCheck.id;
            this.countInfo.day = sessionForm.day;
            // this.getDuringList(1);
            this.getCountList(1);
            this.getModelList(this.queryInfo.brand_id);
        }
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("huaxiQuery");
    },
    methods: {
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/multipledata/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        //获取模板列表
        async getModelList(id) {
            this.modelList = [];
            this.modelCheck = {};
            const { data: res } = await this.$http.post(
                "adminapi/multipledata/templateFind",
                {
                    brand_id: id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList.push(res.data.LIVE_PROM_GOODS);
                this.modelList.push(res.data.VIDEO_PROM_GOODS);
            }
        },

        //获取时段列表
        async getDuringList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/multipledata/duringCount",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.multiple = res.data.multiple
                if (page == 1) {
                    if (res.data.list.length > 0) {
                        this.multiple = res.data.multiple
                        this.rankCout.cost = Number(res.data.list[0].segmentation_cost)*res.data.multiple
                        this.rankCout.gmv = Number(res.data.list[0].segmentation_gmv)*res.data.multiple
                        this.rankCout.roi = (Number(this.countData.gmv)+this.rankCout.gmv)/(Number(this.countData.cost)+this.rankCout.cost)
                    }else{
                        this.multiple = 0
                    }
                }
            }
        },

        //获取总计数据
        async getCountList(page) {
            const { data: res } = await this.$http.post(
                "adminapi/multipledata/allCount",
                this.countInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.countData = res.data;
                this.getDuringList(page);
            }
        },

        //日期选择
        selectDaty() {
            if (!this.queryInfo.brand_id) {
                this.$message.error("请先选择品牌！");
                this.day = "";
                return;
            }
            this.queryInfo.day = this.day;
            this.countInfo.day = this.day;
            this.getCountList(1);
            // this.getDuringList(1)
            this.sesstionData();
        },
        // 选择品牌
        changeBrand(item) {
            this.is_brand = false;
            this.brandCheck = item;
            this.queryInfo.brand_id = item.id;
            this.countInfo.brand_id = item.id;
            this.getModelList(item.id);
            this.getCountList(1);
            // this.getDuringList(1)
            this.sesstionData();
        },

        // 切换模板
        changeModel(item) {
            this.is_type = false;
            this.modelCheck = item;
        },

        changeTime(v) {
            // window.sessionStorage.setItem(
            //     "huaxiTime",
            //     JSON.stringify(v)
            // );
            this.sesstionData();
            this.getDuringList(1);
        },

        // 编辑模板
        editTimeModelHuaxi(item) {
            const attr = {
                dialogVsb: true,
                template_id: item.id,
            };
            this.$bus.emit("editTimeModelHuaxi", attr);
        },

        sesstionData() {
            let sessionForm = {
                brandCheck: this.brandCheck,
                day: this.queryInfo.day,
                during: this.queryInfo.during,
            };
            window.sessionStorage.setItem(
                "huaxiQuery",
                JSON.stringify(sessionForm)
            );
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDuringList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDuringList(val);
        },
    },
    components: {
        EditTimeModelHuaxi,
    },
};
</script>


<style scoped>
.w-20 {
    width: 20% !important;
}

.time_head {
    height: 80px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}
.select_icon {
    margin-right: 10px;
}
.select_box {
    width: 260px;
}
.select_pre {
    height: 100%;
}
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}
.time_title::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.time_count {
    padding: 0 20px;
}
.tc_item {
    background-color: #fafcfe;
    border-radius: 4px;
    height: 88px;
    margin-bottom: 20px;
    padding: 0 16px;
}
.tc_num {
    font-family: D-DIN;
    font-weight: bold;
    font-size: 20px;
    line-height: 17px;
    color: #17233d;
    height: 17px;
    margin-top: 8px;
}
.tc_text {
    font-size: 14px;
    color: #616c85;
    line-height: 20px;
    height: 20px;
}
.time_rank {
    margin-top: 20px;
    height: 36px;
}
.page_box {
    padding: 0;
}
.com_table {
    margin-top: 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}
.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}

.el-icon-question.has_quetion {
    color: #cfd4dd;
    margin-top: 3px;
    margin-right: 5px;
}

.hasSelectList {
    max-height: 200px;
    overflow-y: auto;
}
.hasSelectList li {
    font-size: 14px;
    color: #17233d;
    line-height: 32px;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank_count {
    height: 36px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 4px;
    padding: 0 20px;
    font-size: 13px;
    color: #616c85;
}
.rank_text {
    font-size: 14px;
    color: #17233d;
    font-family: D-DIN;
    font-weight: bold;
}
.rank_line {
    height: 12px;
    border-left: 1px solid #ebebeb;
    margin: 0 16px;
}
.tip_text{
    line-height: 17px;
}
</style>

<style>
.user_select .el-input__suffix .el-icon-arrow-up:before {
    content: "";
    color: #17233d;
}
</style>

